<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生实现Ajax-原理</title>
 <style type="text/css" media="screen">
 
 </style>
</head>

<body>

<script>

      //一. ajax(异步无刷新请求网页)原理-！！！注意服务器运行ajax
/*    1.实例化xhr异步对象  var xhr=new XMLHttpRequest()
     2.建立请求连接 xhr.open('get','url地址',true) //请求类型 get ,post 路径:url地址
     3.发送请求 xhr.send() 发送
     4.发送是否成功  xhr.onreadystatechange=function(){if(xhr.readyState==4){ //有没有发送成功: http请求状态 :0,1,2,3,4 
     	    if(xhr.status==200) //服务器响应状态: 200<=xhr.status<300||xhr.status=304 代表成功  
     	    {
     	    	//请求成功后做的事：响应内容
     	    	//console.log(xhr.responseText);
     	    }
     	    else
             {
                 //请求失败做的事:给你一个状态
                 // console.log(xhr.status);
             }

     }} */

      
   /*  let xhr=new XMLHttpRequest()
       console.log('xhr属性与方法',xhr);
       xhr.open('get','abc.txt',true)
       xhr.send()
       xhr.onreadystatechange=function(){
           console.log(xhr.readyState); //发送状态码
           if(xhr.readyState==4){
                console.log(xhr.status);  
                if(xhr.status==200){
                      console.log(xhr.responseText);
                }
                else{
                    console.log(xhr.status);
                }
           }
       } */


    //二. jq中使用ajax  
  /*   $.ajax({
        url:'abc.txt',
        method:'get',
        // data:{}
        //headers:{}//请求头,token
        //timeout:5000,
        success:function(res){
            console.log('请求成功',res);
        },
        error:function(err){
            console.log('请求失败',res);
        }
    }) */
    
    // 三.封装ajax——通过回调函数把函数内部值拿到外部使用
    function Axios(methond,url,fnSuc,fnErr){
        let xhr=new XMLHttpRequest()
    //    console.log('xhr属性与方法',xhr);
       xhr.open(methond,url,true)
       xhr.send()
       xhr.onreadystatechange=function(){
        //    console.log(xhr.readyState); //发送状态码
           if(xhr.readyState==4){
                console.log(xhr.status);  
                if(xhr.status==200){
                    // console.log('请求成功结果',xhr.responseText);
                    fnSuc(xhr.responseText)  //回调函数
                }
                else{
                    // console.log('请求失败',xhr.status);
                    fnErr(xhr.status)
                }
           }
       }
    }
   
    Axios('get','abc1.txt',function(res){  
        console.log('70请求成功结果',res);
         
    },function(err){
        console.log('请求失败',err);
   
    })
// 扩展阅读-ajax更多封装-https://www.cnblogs.com/webSong/p/7224546.html

</script>
</body>
</html>
